<template>
  <!-- 官网设置 -->
  <div class="entity-org">
    <div class="entity-main">
      <el-row :gutter="20" type="flex">
        <el-col :span="12" style="background: transparent;">
          <NewCard title="「关于」分类" :isright="true" :border="false">
            <!-- 表格  @row-click="handleEdit"-->
            <el-table :data="aboutGrouplist" style="width: 100%" highlight-current-row>
              <el-table-column width="55" v-hasPermi="['base:aboutGroup:remove']">
                <template v-slot="{row}">
                  <i class="el-icon-remove" @click="delectabout(row.id)"></i>
                </template>
              </el-table-column>
              <el-table-column width="180" label="分类" v-hasPermi="['base:aboutGroup:edit']">
                <template v-slot="{row}">
                  <div class="selsect-box">
                    <el-input
                      v-if="row.iseditsetname"
                      v-model="row.name"
                      :placeholder="row.name"
                      @change="(item)=>{changetypename(item,row)}"
                    ></el-input>
                    <p
                      v-else
                      @click="
                        drawer = true;
                        showeditsetname(row);"
                    >{{row.name ? row.name : '--'}}</p>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="180" label="类型" v-hasPermi="['base:aboutGroup:edit']">
                <template v-slot="{row}">
                  <div class="selsect-box">
                    <p>
                      {{row.type=="1" ? "单页" : '列表'}}
                      <i class="el-icon-caret-bottom"></i>
                    </p>
                    <el-select
                      v-model="row.type"
                      :value-key="row.id"
                      placeholder="--"
                      @change="(item) => {
                      edittype(item,row);
                    }"
                    >
                      <el-option
                        v-for="(item,index) in typelist"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>
              <el-table-column width="180" label="内容数">
                <template v-slot="{row}">
                  <div class="selsect-box">
                    <p>{{row.aboutNum ? row.aboutNum : '--'}}</p>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <div class="bottomBtn aboutset">
              <el-button
                v-if="buttonVissible"
                class="button-new-tag"
                size="medium"
                @click="showButton"
              >+ 添加关于分类</el-button>
              <div v-else class="inputBox">
                <el-input v-model="aboutname" placeholder="请输入关于分类"></el-input>
              </div>
              <!-- v-model="row.type"
              :value-key="row.id"-->
              <el-select
                v-model="abouttype"
                placeholder="请选择分类类型"
                @change="
                      selecttypeAdd
                    "
              >
                <el-option
                  v-for="(item,index) in typelist"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <div class="buttonBox">
                <el-button round type="primary" @click="addconfirm" v-hasPermi="['base:aboutGroup:add']">确认</el-button>
                <el-button round @click="addReset">取消</el-button>
              </div>
            </div>
          </NewCard>
        </el-col>
        <el-col :span="12">
          <NewCard title="其他设置" :isright="true" :border="false">
            <div style="border-top: 1px solid #efefef;">
              <div class="inputlist" v-for="item in Officiallist" :key="item.id">
                <span>{{item.name}}</span>
                <el-input v-model="item.value" :value="item.value" :placeholder="'请输入'+item.name"></el-input>
              </div>
              <!-- <div class="inputlist">
                <span>字数下限</span>
                <el-input v-model="worddown" placeholder="请输入字数下限"></el-input>
              </div>
              <div class="inputlist">
                <span>去重率(%)</span>
                <el-input v-model="repetitiverate" placeholder="请输入去重率(%)"></el-input>
              </div>-->
              <div class="bottomBtn otherset">
                <div class="buttonBox">
                  <el-button round @click="reset">重置</el-button>
                  <el-button round type="primary" @click="save">保存</el-button>
                </div>
              </div>
            </div>
          </NewCard>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  getaboutGroupListApi,
  getaboutGroupaddApi,
  getaboutGroupEditApi,
  getaboutGroupRemoveApi,
  getlistOfficialApi,
  getconfigEditApi
} from "@/wss/newApi_3-24/officewebsite/aboutGroup.js";
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";

export default {
  name: "setting",
  components: {
    NewCard,
    SubBtn
  },
  data() {
    return {
      // 是否显示添加按钮
      buttonVissible: true,
      // 添加分类
      aboutname: "", //添加分类名
      abouttype: "", //添加分类选择的分类类型 1是单页2是列表
      aboutGrouplist: [], //关于列表
      Officiallist: [], //官网设置列表
      typelist: [
        //关于分类列表
        {
          id: "1",
          name: "单页"
        },
        {
          id: "2",
          name: "列表"
        }
      ]
    };
  },
  created() {
    this.getaboutGroupList();
    this.getlistOfficial();
  },
  async mounted() {},
  methods: {
    //关于分类列表
    async getaboutGroupList() {
      let res = await getaboutGroupListApi({
        pageNum: 1,
        pageSize: 50
      });
      res.rows.forEach(item => {
        Object.assign(item, { iseditsetname: false });
        //console.log(item);
      });
      this.aboutGrouplist = res.rows;
      // console.log(this.aboutGrouplist);
    },
    //官网设置参数
    async getlistOfficial() {
      let res = await getlistOfficialApi();
      this.Officiallist = res.data;
      //console.log(this.Officiallist);
    },
    selecttypeAdd(item) {
      this.abouttype = item;
    },
    //添加关于分类
    async addconfirm() {
      if (
        this.aboutname == "" ||
        this.aboutname.replace(/(^\s*)|(\s*$)/g, "") == ""
      ) {
        this.$message({
          message: "分类名不可为空",
          type: "warning"
        });
        return;
      }
      if (this.abouttype == "") {
        this.$message({
          message: "请选择分类类型",
          type: "warning"
        });
        return;
      }
      let res = await getaboutGroupaddApi({
        name: this.aboutname,
        type: this.abouttype
      });
      if (res.code != 200) return;
      this.$message({
        message: res.msg,
        type: "success"
      });
      this.aboutname = "";
      this.abouttype = "";
      this.addReset();
      this.getaboutGroupList();
    },
    //修改分类名
    changetypename(item, row) {
      console.log(item, row);
      if (item == "" || item.replace(/(^\s*)|(\s*$)/g, "") == "") {
        this.$message({
          message: "分类名不可为空",
          type: "warning"
        });
        this.getaboutGroupList();
        return;
      }
      this.edittype(item, row);
    },
    //修改关于分类
    async edittype(item, row) {
      console.log(item, row);
      let res = await getaboutGroupEditApi({
        id: row.id,
        name: row.name,
        type: item
      });
      if (res.code != 200) return;
      this.$message({
        message: res.msg,
        type: "success"
      });
      this.getaboutGroupList();
    },
    // 删除关于分类
    async delectabout(id) {
      let { code, msg } = await getaboutGroupRemoveApi(id);
      if (code != 200) return;
      this.$message({
        message: msg,
        type: "success"
      });
      this.getaboutGroupList();
    },
    //重置其他设置
    reset() {
      this.Officiallist.forEach(item => {
        item.value = "";
      });
      console.log(this.Officiallist);
    },
    // 保存其他设置
    async save() {
      let worddown = ""; //字数上限
      let wordup = ""; //字数下限
      let repetitiverate = ""; //去重率
      this.Officiallist.forEach(item => {
        if (item.name == "字数上限") {
          wordup = item.value;
        }
        if (item.name == "字数下限") {
          worddown = item.value;
        }
        if (item.name == "去重率") {
          repetitiverate = item.value;
        }
      });
      if ((wordup = "" || wordup.replace(/(^\s*)|(\s*$)/g, "") == "")) {
        this.$message({
          message: "字数上限不可为空",
          type: "warning"
        });
        return;
      }
      if ((worddown = "" || worddown.replace(/(^\s*)|(\s*$)/g, "") == "")) {
        this.$message({
          message: "字数下限不可为空",
          type: "warning"
        });
        return;
      }
      if (
        (repetitiverate =
          "" || repetitiverate.replace(/(^\s*)|(\s*$)/g, "") == "")
      ) {
        this.$message({
          message: "去重率不可为空",
          type: "warning"
        });
        return;
      }
      let res = await getconfigEditApi(this.Officiallist);
      if (res.code != 200) return;
      this.$message({
        message: res.msg,
        type: "success"
      });
    },
    //显示设置名称修改输入框
    showeditsetname(row) {
      // console.log("改变热词");
      // console.log(row);
      this.$set(row, "iseditsetname", true);
    },
    showButton() {
      this.buttonVissible = false;
    },

    addReset() {
      this.buttonVissible = true;
    }
  }
};
</script>

<style scoped lang="scss">
// 外层
.entity-org {
  height: 100%;
}
::v-deep .entity-main .el-card {
  position: relative;
}
::v-deep .entity-main .el-card__body {
  height: 100%;
}
::v-deep .entity-main .el-card__body > div {
  height: 92%;
  overflow-y: auto;
}
::v-deep .entity-main .el-card__body > div::-webkit-scrollbar {
  width: 0;
}
/* 内容区 */
.entity-main {
  height: 100%;
}
.entity-main .el-row {
  height: 100%;
}
//select样式
.selsect-box {
  position: relative;
}
.selsect-box > p {
  position: relative;
}
.selsect-box .el-select {
  position: absolute;
  top: 0;
  z-index: 9;
  opacity: 0;
}
//表格样式
.el-table {
  margin-bottom: 80px;
}
::v-deep .el-table .el-table__header-wrapper th {
  background-color: #fff;
}
::v-deep .el-table th.is-leaf {
  border-top: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
::v-deep .el-table th > .cell {
  font-size: 12px;
  color: #909aaa;
}
::v-deep .el-table .cell,
::v-deep .el-table .cell p {
  margin: 0;
  font-size: 14px;
  color: #2e3f5e;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
::v-deep .el-table .cell .el-button {
  color: #f87a23;
}
::v-deep .el-table .cell .el-table__expand-icon i::before {
  content: "\E791";
}
::v-deep .el-table td {
  /* border-bottom: 0; */
}
::v-deep .el-table td .islight {
  color: #f87a23;
}
::v-deep .el-table .el-table__expanded-cell[class*="cell"] {
  padding: 0;
}
::v-deep .el-table__expanded-cell .el-table::before {
  height: 0;
}
::v-deep .el-table__expanded-cell .el-table th.is-leaf {
  border-top: 0;
}
::v-deep .el-table__expanded-cell .el-table td {
  border-bottom: 0;
}

::v-deep .el-table__footer-wrapper tbody td {
  background-color: #fff;
  font-weight: bold;
  color: #2e3f5e;
}
::v-deep .el-table::before {
  display: none;
}
// tabel表格
.el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner::-webkit-input-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner:-moz-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner::-moz-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep
  .el-table__body-wrapper
  .el-cascader
  .el-input
  .el-input__inner:-ms-input-placeholder {
  color: #2e3f5e;
  font-size: 14px;
}
::v-deep .el-table__body-wrapper .el-cascader .el-icon-caret-bottom {
  position: absolute;
  right: 0;
}
::v-deep .el-table__body-wrapper .el-cascader,
.el-table__body-wrapper .el-cascader .el-input {
  width: 100%;
}

/* 底层添加按钮 */
.aboutset .buttonBox {
  display: flex;
}
.bottomBtn {
  background-color: #f6f9f8;
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 9px 10px;
  width: 100%;
  border-top: 1px solid #ecedf0;
  z-index: 9;
  .inputBox {
    // flex: 1;
    display: flex;
  }
  .el-select {
    margin-right: 10px;
  }
  .buttonBox {
    /* // ::v-deep .el-button + .el-button {
    //   margin-left: 0px;
    // } */
    ::v-deep .el-button--primary {
      background-color: #f87a23;
      border-color: #f87a23;
      color: #ffffff;
      width: 90px;
      // height: 40px;
      line-height: 34px;
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #ffffff;
    }
    ::v-deep .el-button--default {
      background-color: #ffffff;
      width: 90px;
      // height: 40px;
      line-height: 34px;
      padding: 0;
      text-align: center;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #606e84;
    }
  }
}
::v-deep .el-table .el-dropdown-link {
  color: unset;
}
.bottomBtn .el-button {
  width: 100%;
  border: 0;
  border-top: 1px solid #ecedf0;
  background-color: #f8f8f8;
  line-height: 25px;
  color: #606e84;
}
.bottomBtn .el-input {
  width: 100%;
  margin-right: 10px;
}
::v-deep .bottomBtn .el-input .el-input__inner {
  height: 36px;
  line-height: 36px;
  /* // border-top: 1px solid #ecedf0;
  // background-color: #f8f8f8; */
  // text-align: center;
}

.button-new-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  border: 0;
  z-index: 2;
  display: block;
  width: 100%;
  font-size: 16px;
  padding: 15px 20px;
  background-color: #f8f8f8;
  border-top: 1px solid #e6ebf5;
}

//其他设置底部栏
.otherset {
  background: #fff;
  text-align: right;
}
.otherset .buttonBox {
  width: 100%;
}
.otherset .el-button--default {
  border-radius: 20px;
  border: 1px solid #dadee2;
}
.inputlist {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.inputlist span {
  width: 90px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: #2e3f5e;
}
</style>